/*
 * @Author: yangzonglong
 * @Date: 2021-03-01 13:18:46
 * @version: v1.0.0
 * @Descripttion:
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-08-17 10:35:27
 * @Auditor:
 */
import React, { useMemo, useRef, useEffect } from 'react';
import JsBarcode from 'jsbarcode';

const QRCode = require('qrcode.react')

const App = (props: any) => {

  const { value, _dataIndex, columns } = props;

  const refs = useRef(null)

  const columnsOptions = useMemo(() => columns?.filter((item: any) => item.dataIndex === _dataIndex), [_dataIndex, columns])

  useEffect(() => {
    if (!value || columnsOptions?.[0]?.printType !== 'barCode') return
    JsBarcode(refs.current, value, {
      displayValue: false,
      width: 1.5,
      height: 50,
      margin: 0,
    });
  }, [value, columnsOptions])

  return value ? columnsOptions?.[0]?.printType === 'barCode' ? <div style={{ display: 'inline-block' }} ><svg ref={refs} />  </div> : <QRCode
    value={value}
    size={100}
  /> : '-';
};

export default App;
